<div class="page-header">
	<ul id="table-tab" class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#area-tab"
			aria-controls="area-tab" role="tab" data-toggle="tab">区域管理</a>
		</li>
	</ul>
</div>
<div class="tab-content">
	<div id="area-tab" class="tab-pane active" role="tabpanel">
		<div class="row">
			<div class="col-md-3">
            	<div class="widget-box">
                    <div class="widget-body">
                        <div class="widget-main padding-8" style="overflow-x:auto;">
                            <ul id="treeArea" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--搜索域-->
            <div class="col-md-9">
            	<div class="search-area">
            		<form id="table-area-search" class="form-inline">
                        <input type="hidden" id="area-parentid" name="area.parentid" value="" />
                        <input type="hidden" id="area-level" name="area.level" value="0" />
                        <div class="form-group">
                            <label for="area.name">区域名称：</label>
                            <input type="text" class="form-control input-sm" id="area-name" name="area.name" value="" placeholder="按名称搜索">
                        </div>
                        <div class="form-group">
                            <label for="area.code">区域编码：</label>
                            <input type="text" class="form-control input-sm" id="area-code" name="area.code" value="" placeholder="按编码搜索">
                        </div>
                        <div class="form-group">
                            <label for="area.pinyin">拼音简码：</label>
                            <input type="text" class="form-control input-sm" id="area-pinyin" name="area.pinyin" value="" placeholder="按简码搜索">
                        </div>
	                    <button id="btn-area-search" type="button" class="btn btn-info btn-sm no-border">
	                    	<i class="ace-icon fa fa-search bigger-110"></i>查询
	                    </button>
	                    <div class="form-group pull-right">
                    		<span>查询方式：</span>
                           	<label class="radio-inline">
                           		<input type="radio" name="searchType" value="1" checked="checked"/>精确
                           	</label>
                           	<label class="radio-inline">
                           		<input type="radio" name="searchType" value="0"/>模糊
                           	</label>
                        </div>
                    </form>
                </div>
				<!-- 数据表格 -->
                <div id="table-area-toolbar">
            		<div class="btn-group btn-group-sm">
                		<!-- 
	                    <button id="viewarea" class="btn btn-purple btn-sm no-border" >
	                        <i class="ace-icon fa  fa-eye bigger-110 "></i>查看
	                    </button>
	                    <button id="addarea" class="btn btn-info btn-sm no-border" 
	                    onclick="goAdd('新增区域', 'system/admin/area/add?level=0', 'table-area');">
	                        <i class="ace-icon fa fa-plus bigger-110"></i>新增
	                    </button>
	                    <button id="editarea" class="btn btn-success btn-sm no-border"
	                    onclick="goUpdate('编辑区域', 'system/admin/area/edit', 'table-area');">
	                        <i class="ace-icon fa fa-pencil-square-o bigger-110"></i>编辑
	                    </button>
	                    <button id="delarea" class="btn btn-danger btn-sm no-border"
	                    onclick="doDels('system/admin/area/deletes', 'table-area', refreshTree);">
	                        <i class="ace-icon fa fa-trash-o bigger-110"></i>删除
	                    </button>
	                   -->
	                   
	                   <x:toolbar menuId="${menuId}" elemIds="addArea,editArea,delArea">
	                   </x:toolbar>
                    </div>
                </div>
            	<table id="table-area" 
            			data-toolbar="#table-area-toolbar" 
            			data-sort-name="code" 
            			data-sort-order="asc"
            			data-show-columns="true"
            			data-id-field="uuid">
            		 <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"></th>
                            <th data-width="160" data-field="name" data-align="left" data-sortable="false">区域名称</th>
                            <th data-field="code" data-align="left" data-sortable="true">区域编码</th>
                            <th data-field="pinyin" data-align="left" data-sortable="true">拼音简码</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
	</div>
</div>

<script type="text/javascript">

function refreshTree(){
	var treeObj = $.fn.zTree.getZTreeObj("treeArea");
	var selNodes = treeObj.getSelectedNodes();
	if (selNodes.length>0) {
		if(selNodes[0].isParent && selNodes[0].children.length > 0){
			treeObj.reAsyncChildNodes(selNodes[0], "refresh", true);
		} else {
			treeObj.reAsyncChildNodes(selNodes[0].getParentNode(), "refresh", true);
		}
	} else {
		var nodes = treeObj.getNodes();
		if(nodes[0].isParent && nodes[0].children.length > 0){
			treeObj.reAsyncChildNodes(nodes[0], "refresh", true);
		} else {
			treeObj.reAsyncChildNodes(nodes[0].getParentNode(), "refresh", true);
		}
	}
}

$(document).ready(function(){
	$.fn.zTree.init($("#treeArea"), {
		async: {
			enable: true,
			url:"system/admin/area/tree",
			autoParam:["uuid", "alevel"],
			dataFilter: ajaxFilter
		},
		callback:{
			onClick:treeOnClick
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "uuid",
				pIdKey: "parentid",
				rootPId: null
			}
		},
		check: {
			enable: false,
			autoCheckTrigger: false,
			chkboxType: { "Y" : "p", "N" : "p" }
		}
	});
	
	function ajaxFilter(treeId, pNode, respData){
		var nodes = null;
		if(respData.status == 'OK'){
			nodes = respData.rows;
		}
		if(nodes != null && nodes.length > 0){
			if(nodes[0].isdata){
				$('#area-level').val(nodes[0].alevel + 1);
			}else{
				$('#area-level').val(-1);
			}
			initTableList('table-area','system/admin/area/dataGrid', 'table-area-search', 'btn-area-search');
		}
		return nodes;
	}
	
	function treeOnClick(event, treeId, treeNode){
		$('#area-level').val(treeNode.alevel + 1);
		if(treeNode.uuid == null){
			$('#area-parentid').val("");
		} else {
			$('#area-parentid').val(treeNode.uuid);
		}
		$('#table-area').bootstrapTable('selectPage', 1);
		//刷新完毕还原
		//$('#area-level').val("");
		//$('#area-parentid').val("");
		//改变add 参数
		var url = 'system/admin/area/add?level='+ (treeNode.alevel + 1);
		if(treeNode.uuid != null){
			url += '&parentid=' + treeNode.uuid;
		}
		$('#addarea').attr("onclick", "goAdd('新增区域','"+url+"' , 'table-area');");
	};
	
});

</script>
